<!--  -->
<template>
    <div class="">
        <template v-for="(item,index) in teamOrders">
            <router-link tag="div" :to="{name:'teamOrderDetail',params:{id:item.gau_id}}"  class="team-item show_public" :key="index" >
                <div class="title flex justify-between aligin-center">
                    <img class="avator" :src="item.avatar_url" alt="">
                    <span class="ml-12 f-12 mr-auto">购买人:{{item.nickname}}</span>
                    <span class="color-gray f-12">{{item.order_no}}</span>
                </div>
                <div class="body f-12">
                    <div class="flex">
                        <img class="prod-img mr-16" :src="item.pic_cover_small" alt="">
                        <div class="flex-1">
                            <div class="pt-10 flex aligin-center justify-between">
                                <span class="name ellipsis">{{item.name}}</span>
                                <span
                                    class="status-btn flex justify-center aligin-center color-white"
                                    :class="item.luck_user==0?'bg-gray':item.luck_user?'':'bg-green'"
                                >{{item.luck_user==0?'未中奖':item.luck_user?'中奖':'待开奖'}}</span>
                            </div>  
                            <div class="color-red mt-16">订单金额:￥{{item.total_money}}</div>
                            <div class="mt-10 color-red">获得能量值:{{item.give_power}}</div>
                        </div>
                    </div>
                    <div class="mt-24">{{item.created_time}}</div>
                </div>
            </router-link>
        </template>
    </div>
</template>

<script>
export default {
  components: {},
  props: {
    teamOrders: {
      type: Array,
      default: () => {
        return [];
      },
      required: true
    }
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类

.team-item {
  .title {
    height: 44px;
    padding: 0 5px 0 10px;
    border-bottom: 1px solid #eaeaea;
    .avator {
      height: 24px;
      width: 24px;
      border-radius: 50%;
    }
  }
  .body {
    padding: 12px 6px 11px 15px;
    .flex-1{
        flex: 1
    }
    .name {
      width: 170px;
    }
    .prod-img {
      height: 72px;
      width: 72px;
    }
    .status-btn {
      width: 48px;
      height: 20px;
      background: rgba(239, 86, 101, 1);
      border-radius: 10px;
    }
    .bg-gray{
    background: #7C7C7C;
    }
    .bg-green{
        background: #058402
    }
    .color-red {
      color: #ef5665;
    }
  }
}
</style>